<template>
    <view class="recommend mt-32">
        <view class="f jc-s-b ai-c">
            <view class="fs-36 fw-600 text-color4">相关推荐</view>
            <view class="f ai-c" @click='toMore'>
                <view class="fs-24 text-color3 mr-9"> 更多</view>
                <u-icon name="arrow-right" size="10" color="#999"></u-icon>
            </view>
        </view>
        <view class="f jc-s-b mt-20">
            <view class="mr-16">
             
					  <view v-for="(item, index) in listL" :key="index" class="w-335 b-24 ph-8 pt-8 pb-20 box mb-16" @click="toDetail(item)">
                   <image :src="item.img" class="w-319 b-24" mode="widthFix" v-show="item.urls" v-if="item.urls"></image>
                   <video
                       :src="item.videoUrl"
                       v-show="item.videoUrl"
                       class="w-319 b-24"
                       mode="widthFix"
                       object-fit="fill"
                       :controls="false"
                       :show-center-play-btn="false"
                   	v-if="item.videoUrl"
                   ></video>
                    <view class="fs-28 fw-600 mt-20 text-color4 text-ellipsis-2">{{ item.title }}</view>
                    <view class="f ai-c jc-s-b mt-12">
                       <view class="f f1 ai-c">
                           <image :src="item.avatar" class="w-40 h-40 mr-12 ava"></image>
                           <view class="f f1 text-ellipsis-1 fs-24 text-color2">{{ item.memberNickname }}</view>
                       </view>
                       
						<view class="f ai-c" :class="item.likeEnabled ? 'text-color' : 'text-color3'" @click.stop="handleZan(item, index, 'r')">
						    <image src="http://cwht.ricecs.cn/app/index/zan.png" class="w-24 h-24 mr-8"></image>
						    <view class="fs-24">{{ item.likeCount }}</view>
						</view>
                    </view>
                </view>
            </view>
            <view>
                <view v-for="(item, index) in listR" :key="index" class="w-335 b-24 ph-8 pt-8 pb-20 box mb-16" @click="toDetail(item)">
                  <image :src="item.img" class="w-319 b-24" mode="widthFix" v-show="item.urls" ></image>
                  <video
                      :src="item.videoUrl"
                      v-show="item.videoUrl"
                      class="w-319 b-24"
                      mode="widthFix"
                      object-fit="fill"
                      :controls="false"
                      :show-center-play-btn="false"
                  	v-if="item.videoUrl"
                  ></video>
                    <view class="fs-28 fw-600 mt-20 text-color4 text-ellipsis-2">{{ item.title }}</view>
                    <view class="f ai-c jc-s-b mt-12">
                        <view class="f f1 ai-c">
                            <image :src="item.avatar" class="w-40 h-40 mr-12 ava"></image>
                            <view class="f f1 text-ellipsis-1 fs-24 text-color2">{{ item.memberNickname }}</view>
                        </view>
                       <view class="f ai-c" :class="item.likeEnabled ? 'text-color' : 'text-color3'" @click.stop="handleZan(item, index, 'r')">
                           <image src="http://cwht.ricecs.cn/app/index/zan.png" class="w-24 h-24 mr-8"></image>
                           <view class="fs-24">{{ item.likeCount }}</view>
                       </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { getBaseUrl } from '@/utils/env';

import { ref } from 'vue';
import { categoryList, listParentcodes } from '@/services/api/index/index';
import { recommendedpage, likeIncrese, likeDecrese } from '@/services/api/novice';
const listQuery = ref({
    pageNo: 1,
    pageSize: 10,
		followFlag:true
});
const listL = ref<any>([]);
const listR = ref<any>([]);
getContentPage();
//赞
async function handleZan(item: any, index: number, type: string) {
    if (!item.likeEnabled) {
        await likeIncrese({ id: item.id });
        if (type === 'l') {
            listL.value[index].likeCount = listL.value[index].likeCount + 1;
        } else {
            listR.value[index].likeCount = listR.value[index].likeCount + 1;
        }
    } else {
        await likeDecrese({ id: item.id });
        if (type === 'l') {
            listL.value[index].likeCount = listL.value[index].likeCount - 1;
        } else {
            listR.value[index].likeCount = listR.value[index].likeCount - 1;
        }
    }
    if (type === 'l') {
        listL.value[index].likeEnabled = !listL.value[index].likeEnabled;
    } else {
        listR.value[index].likeEnabled = !listR.value[index].likeEnabled;
    }
}
//详情
function toDetail(item: any) {
    if (item.urls) {
        uni.navigateTo({
            url: `/pages_novice/trendsDetail?id=${item.id}`,
        });
    } else {
        uni.navigateTo({
            url: `/pages_novice/videoDetail?id=${item.id}`,
        });
    }
}
//获取列表
async function getContentPage() {
    const { data } = await recommendedpage(listQuery.value);
    if (data.list.length > 0) {
        data.list.forEach((item: any, index: number) => {
            if (item.urls) {
                item.img = item.urls.split(',')[0];
            }

            if (index % 2 === 0) {
                listL.value.push(item);
            } else {
                listR.value.push(item);
            }
        });
    }
}

function toMore(){
	uni.switchTab({
		url:'/pages/novice/index'
	})
}
</script>
<style lang="scss" scoped>
.recommend {
    .box {
        background: #fff;
        .ava {
            border-radius: 50%;
        }
    }
}
</style>
